<!--
 * @Author: yan_hai_dong 891236760@qq.com
 * @Date: 2022-10-19 15:39:26
 * @LastEditors: yan_hai_dong 891236760@qq.com
 * @LastEditTime: 2022-10-21 14:51:02
 * @FilePath: \app\src\views\el\bgHover\ModeImg\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="modal-box">
    <slot></slot>
  </div>
</template>
  
<script>
export default {};
</script>
  
<style lang="less" scoped>
.modal-box {
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  &::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    z-index: 100;
    backdrop-filter: grayscale(1);
    transition: width 1s ease-in-out;
  }
  &:hover::before {
    width: 0;
  }
}
</style>